import { ref, watch } from 'vue'
import { cloneDeep } from 'lodash-es'
import { defineStore } from 'pinia'
import { constantRoutes, loginRoutes } from '@/router/routes'
import { isLogin } from '@/utils'
import router from '@/router'

export default defineStore('user', () => {
    const userInfo = ref({})
    const userID = ref<null | string>(null)


    // 用户搜索历史
    function useSearch() {
        const searchHistory = ref<string[]>([])
        async function addSearchHistory(name: string) {
            if (name.length <= 0) return Promise.reject('name is empty');
            const index = searchHistory.value.findIndex(item => item === name)
            if (index === -1) {
                searchHistory.value.unshift(name)
            } else {
                searchHistory.value.splice(index, 1)
                searchHistory.value.unshift(name)
            }
            return 'ok'
        }
        function removeSearchHistory(i) {
            searchHistory.value.splice(i, 1)
        }
        function clearSearchHistory(i) {
            searchHistory.value.splice(0, searchHistory.value.length)
        }
        return { searchHistory, addSearchHistory, removeSearchHistory, clearSearchHistory }
    }
    // 用户菜单
    function useMenu() {
        const createSheetMenu = ref({
            type: 'group',
            label: '创建的歌单',
            key: 'create-playlist',
            children: handleFilter(constantRoutes, loginRoutes, 'my-create')
        })
        const collectMenu = ref({
            type: 'group',
            label: '收藏的歌单',
            key: 'collect-playlist',
            children: handleFilter(constantRoutes, loginRoutes, 'my-collect')
        })
        const baseMenu = ref(handleFilter(constantRoutes, loginRoutes, 'base'))
        const myMusicMenu = ref({
            type: 'group',
            label: '我的音乐',
            key: 'my-music',
            children: handleFilter(constantRoutes, loginRoutes, 'my-music')
        })
        const userMenus = computed<MenuOption[]>(() => {
            return [
                ...baseMenu.value,
                myMusicMenu.value,
                createSheetMenu.value,
                collectMenu.value
            ]
        })

        function handleFilter(baseRoutes: [], loginRoutes: [], group: string) {
            let deepBase = cloneDeep(baseRoutes)
            let deepLogin = cloneDeep(loginRoutes)
            if (isLogin(userID.value)) {
                loginRoutes.forEach(item => {
                    router.addRoute('Layout', item)
                })
                return [...deepBase, ...deepLogin].filter(item => {
                    if (item.meta.group === group) {
                        item.label = item.meta.title
                        item.key = item.meta.page
                        item.meta?.icon ? (item.icon = item.meta.icon) : ''
                    }
                    return item.meta.group === group
                })
            } else {
                return deepBase.filter(item => {
                    if (item.meta.group === group) {
                        item.label = item.meta.title
                        item.key = item.meta.page
                        item.meta?.icon ? (item.icon = item.meta.icon) : ''
                    }
                    return item.meta.group === group
                })
            }
        }
        watch(userID, () => {
            createSheetMenu.value.children = handleFilter(constantRoutes, loginRoutes, 'my-create')
            collectMenu.value.children = handleFilter(constantRoutes, loginRoutes, 'my-collect')
            baseMenu.value.children = handleFilter(constantRoutes, loginRoutes, 'base')
            myMusicMenu.value.children = handleFilter(constantRoutes, loginRoutes, 'my-music')
        }, { immediate: true })
        return { userMenus }
    }
    return { ...useSearch(), ...useMenu(), userInfo, userID }
}, { persist: true })
